<!doctype html>
<html dir="$i18n{textdirection}" lang="$i18n{language}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>$i18n{title}</title>

<link rel="stylesheet" href="./policy.css">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">

</head>

<body>
  <header>
    <div class="header-row">
      <h1>$i18n{title}</h1>
      <input id="filter" class="search-field-container" type="search"
          placeholder="$i18n{filterPlaceholder}"
          aria-label="$i18n{filterPlaceholder}" incremental>
    </div>
    <div class="header-row">
      <button id="reload-policies">$i18n{reloadPolicies}</button>
      <button id="export-policies">$i18n{exportPoliciesJSON}</button>
      <button id="copy-policies">$i18n{copyPoliciesJSON}</button>
<if expr="not is_chromeos">
      <button id="upload-report">$i18n{uploadReport}</button>
</if>
      <div id="show-unset-container" class="show-unset-checkbox">
        <label>
          <input id="show-unset" type="checkbox">
          <span>$i18n{showUnset}</span>
        </label>
      </div>
    </div>
    <div aria-live="polite" id="screen-reader-message"></div>
  </header>
  <main id="policy-ui">
    <section id="status-section" class="status-box-section" hidden>
      <h3>$i18n{status}</h3>
      <div id="status-box-container"></div>
    </section>
    <section id="main-section" class="empty">
      <!--  This is where policy tables get dynamically added. -->
    </section>
  </main>
</body>

<script type="module" src="policy.js"></script>
</html>
